/**
 * 拖拽移动的指令
 */
export default {
  bind(el, binding) {
    dragBindMove(el, binding);
  },
};

/**
 * 绑定拖动事件到元素上，允许元素在页面中被拖动。
 * @param {HTMLElement} el - 要绑定拖动事件的元素。
 * @param binding
 */
export function dragBindMove(el, binding) {
  const flag = binding.value?.flag;
  let firstTime = "",
    lastTime = "";
  // 在元素上添加触摸开始的事件监听器
  el.addEventListener("touchstart", dragMoveStart);
  let odiv = el; //获取当前元素
  // 在元素上添加鼠标按下事件监听器
  el.onmousedown = (e) => {
    odiv.style.cursor = "move";
    e.stopPropagation();
    // 计算鼠标位置与元素左上角的偏移
    //算出鼠标相对元素的位置
    let disX = e.clientX - odiv.offsetLeft;
    let disY = e.clientY - odiv.offsetTop;
    // 初始化元素的left和top值
    let left = "";
    let top = "";

    if (flag) {
      firstTime = new Date().getTime();
      document.getElementById("dragBox").setAttribute("data-flag", "false");
    }

    // 添加鼠标移动事件监听器，用于在拖动时更新元素位置
    document.onmousemove = (event) => {
      //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
      left = event.clientX - disX;
      top = event.clientY - disY;
      moveFn(left, top, odiv);
    };
    // 添加鼠标释放事件监听器，用于在拖动结束时清理状态
    document.onmouseup = () => {
      if (flag) {
        lastTime = new Date().getTime();
        if (lastTime - firstTime < 200) {
          document.getElementById("dragBox").setAttribute("data-flag", "true");
        }
      }
      document.onmousemove = null;
      document.onmouseup = null;
      odiv.style.cursor = "auto";
    };
  };
  /**
   * 处理触摸开始事件，初始化拖动状态。
   * @param {Event} e - 触摸开始事件对象。
   */
  function dragMoveStart(e) {
    odiv.style.cursor = "move";
    e.stopPropagation();
    // 计算触摸位置与元素左上角的偏移
    //算出鼠标相对元素的位置
    let disX = event.touches[0].clientX - odiv.offsetLeft;
    let disY = event.touches[0].clientY - odiv.offsetTop;
    // 初始化元素的left和top值
    let left = "";
    let top = "";
    // 添加触摸移动和结束事件监听器，用于在拖动时更新元素位置和清理状态
    el.addEventListener("touchmove", dragMoveMove);
    el.addEventListener("touchend", dragMoveEnd);
    /**
     * 处理触摸移动事件，更新元素位置。
     * @param {Event} event - 触摸移动事件对象。
     */
    function dragMoveMove(event) {
      const touchX = event.touches[0].clientX;
      const touchY = event.touches[0].clientY;
      //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
      left = touchX - disX;
      top = touchY - disY;
      moveFn(left, top, odiv);
    }
    /**
     * 处理触摸结束事件，清理拖动状态。
     */
    function dragMoveEnd() {
      document.onmousemove = null;
      document.onmouseup = null;
      odiv.style.cursor = "auto";
      el.removeEventListener("touchmove", dragMoveMove);
      el.removeEventListener("touchend", dragMoveEnd);
    }
  }
}

/**
 * 更新元素的位置。
 * @param {string} divLeft - 元素的left值。
 * @param {string} top - 元素的top值。
 * @param {HTMLElement} odiv - 要移动的元素。
 */
function moveFn(divLeft, top, odiv) {
  // 获取元素的高度和宽度，包括任何内边距和边框
  let oDivHeight = window
    .getComputedStyle(odiv, null)
    .getPropertyValue("height");
  let oDivWidth = window.getComputedStyle(odiv, null).getPropertyValue("width");
  // 根据计算出的left和top值移动元素，并确保元素不会移出窗口边界
  // 绑定元素位置到positionX和positionY上面
  //移动当前元素
  // 边界判断
  if (parseInt(divLeft) <= 0) {
    odiv.style.left = "0px";
  } else if (parseInt(divLeft) >= window.innerWidth - parseInt(oDivWidth)) {
    odiv.style.left = window.innerWidth - parseInt(oDivWidth) + "px";
  } else {
    odiv.style.left = divLeft + "px";
  }
  if (parseInt(top) <= 0) {
    odiv.style.top = "0px";
  } else if (parseInt(top) >= window.innerHeight - parseInt(oDivHeight)) {
    odiv.style.top = window.innerHeight - parseInt(oDivHeight) + "px";
  } else {
    odiv.style.top = top + "px";
  }
}
